<template>
  <div class="homepage">
    <div class="top">
      <div class="top-item">1</div>
      <div class="top-item">2</div>
      <div class="top-item">3</div>
      <div class="top-item">4</div>
      <div class="top-item">5</div>
    </div>
    <div class="middle">
      <div class="middle-item">1</div>
      <div class="middle-item">2</div>
    </div>
    <div class="bottom">
      <div class="bottom-item">1</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Homepage',
  mounted() {
    console.log('index');
  },
  componets: {

  }
}
</script>
<style lang="scss">
.homepage {
  width: 100%;
  background: #eee;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-around;
  .top {
    display: flex;
    justify-content: space-around;
    flex: 0 0 140px;
    .top-item {
      flex: 0 0 18%;
      background-color: #fff;
      border-radius: 15px;
    }
  }
  .middle {
    display: flex;
    justify-content: space-around;
    flex: 0 0 38%;
    .middle-item {
      flex: 0 0 48%;
      background-color: #fff;
      border-radius: 15px;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-around;
    flex: 0 0 38%;
    .bottom-item {
      flex: 0 0 98%;
      background-color: #fff;
      border-radius: 15px;
    }
  }
}
</style>
